<template>
  <!--  轮播图  -->
  <Carousel/>
  <!--  搜索区  -->
  <Search/>
  <!--医院选择-->
  <el-row :gutter="20">
    <el-col :span="20">
      <Level @getLevel="getLevel"/>
      <Region @getRegion="getRegion"/>
      <!--  医院卡片展示区域      -->
      <div class="card" v-if="hospitalData.length > 0">
        <Card v-for="item in hospitalData" :key="item.id" class="content" :hospitalInfo="item"/>
      </div>
      <el-empty v-else description="暂无数据"/>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout=" prev, pager, next, jumper, sizes,total"
          :total="totalNo"
          @size-change="sizeChange"
          @current-change="currentChange"
      />
      <!--  医院卡片分页区域      -->
    </el-col>
    <el-col :span="4">
      <Tip/>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import Carousel from '@/pages/home/carousel/index.vue'
import Search from '@/pages/home/search/index.vue'
import Level from '@/pages/home/level/index.vue'
import Region from '@/pages/home/region/index.vue'
import Card from '@/pages/home/card/index.vue'
import Tip from '@/pages/home/tip/index.vue'
import {onMounted, ref} from 'vue'
import {home} from '@/api/home'
import type {Content, HospitalResponseData} from '@/api/home/type'


let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
let totalNo = ref<number>(0)
let hospitalData = ref([] as Content)
let hosType = ref<string>('')
let districtCode = ref<string>('')

!onMounted(() => {
  hospitalInfo();
})

/*获取医院数据*/
const hospitalInfo = async () => {
  let response: HospitalResponseData = await home.hospitalInfo(currentPage.value, pageSize.value, hosType.value, districtCode.value)
  if (response.code === 200) {
    hospitalData.value = response.data.content
    totalNo.value = response.data.totalElements
  }
}
/*一页总数的改变回调*/
const sizeChange = () => {
  hospitalInfo();
}
/*当前页码的改变*/
const currentChange = () => {
  hospitalInfo();
}
/*子组件传递过来的医院等级选择*/
const getLevel = (val: string) => {
  hosType.value = val
  hospitalInfo();
}
/*子组件传递过来的医院地区*/
const getRegion = (val: string) => {
  districtCode.value = val
  hospitalInfo();
}

</script>

<style scoped lang="scss">

.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .content {
    width: 48%;
    margin: 0 0 20px 0;
  }
}


</style>